<template>
  <div class="login-panel">
    <!-- <div class="leftClass">
      <div class="leftClassTitle">
        <div class="fontTitle">
          <img :src="logoImg" alt="" />
          <span>数据编辑器</span>
        </div>
      </div>
      <div class="leftCarouse">
      </div>
    </div> -->

    <div class="rightClass">
      <!-- <div v-if="showRegister == false" class="register">
        没有账号? <span @click="toggleShowRegister">注册账号</span>
      </div>
      <div v-else class="register">
        已经有账号? <span @click="toggleShowRegister">立即登录</span>
      </div> -->
      <div class="register">
        <themeSwitch />
      </div>
      <div class="loginPanel-1">
        <loginPanel v-if="showRegister == false"></loginPanel>
        <registerPanel v-else></registerPanel>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import loginPanel from "@/components/login/index.vue";
import registerPanel from "@/components/login/register.vue";
import carouse from "./carouse.vue";
import logoImg from "@/assets/image/logo.png";
import themeSwitch from "@/components/theme-switch/index.vue";

import { ref } from "vue";
const showRegister = ref(false);
const toggleShowRegister = () => {
  showRegister.value = !showRegister.value;
};
</script>

<style lang="scss" scoped>
.login-panel {
  box-sizing: border-box;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background-color: #ebecf0;

  .leftClass {
    width: 99vw;
    flex: auto;
    height: 100%;
    // border: 1px solid red;
    background-color: #ebecf0;
    color: black;

    display: flex;
    flex-direction: column;

    .leftClassTitle {
      width: 100%;
      padding-bottom: 30px;
      // height: 80p
      // margin-bottom: 20px;
      // border: 1px solid greenyellow;

      .fontTitle {
        width: 100%;

        font-size: 22px;
        // color: white;
        // color: black;
        font-weight: bold;
        font-style: italic;
        margin-left: 5px;
        text-align: left;
        margin-top: 25px;
        display: flex;
        align-items: center;

        img {
          width: 35px;
          object-fit: contain;
        }

        // border: 1px solid greenyellow;
      }

      .fontScript {
        width: 100%;
        font-size: 12px;
        font-style: italic;
        text-align: left;
        margin-left: 40px;
        margin-top: 10px;
        // transform: rotate(10deg);
        // border: 1px solid greenyellow;
      }
    }

    .leftCarouse {
      width: 100%;
      height: 100%;
      // border: 1px solid rosybrown;
    }
  }

  .rightClass {
    // border: 1px solid rgb(43, 204, 2);
    padding: 0px 20px 0px 20px;
    background-color: #ffffff;
    box-shadow: -6px 0 20px rgba(0, 0, 0, 0.08);
    // margin-top: 5vh;
    user-select: none;
    border-radius: 8px;

    .register {
      // border: 1px solid red;
      color: black;
      text-align: right;
      margin-top: 5%;

      span {
        color: #38eb8c;
        cursor: pointer;
      }

      span:hover {
        font-weight: bold;
      }

      span:active {
        // font-weight: bold;
        opacity: 0.8;
      }
    }

    .loginPanel-1 {
      // border: 1px solid red;
      // margin-top: 5%;
    }
  }
}

// .dark .leftClassTitle {
//   // background-color: ;
// }

// .dark .fontTitle {
//   color: white;
// }
.dark .login-panel {
  background-color: #242424;
}

.dark .rightClass {
  background-color: #18181c;
}

.dark .login-panel .rightClass .register {
  color: white;
}

.dark .leftClass {
  background-color: #242424;
  color: #c5beb3;
}

@media (max-width: 830px) {
  .login-panel {
    overflow: hidden;
    // overflow-x: auto;

    // height: 100vh;
    // width: 100vw;
    .leftClass {
      display: none;
    }

    .rightClass {
      width: 100vw;
    }
  }
}
</style>
